<!--
 * @Description: 添加
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-28 15:32:03
 * @FilePath: /yuxiuproweb/src/views/goods/gd/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="1100px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">商品原料</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="品名" prop="name">
              <el-input v-model="form.name" placeholder="请输入品名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型" prop="type">
              <el-select
                style="width: 100%"
                v-model="form.type"
                placeholder="请选择类型"
                @change="handleGDChange"
              >
                <el-option
                  v-for="item in dict.type.md_high_end_customization_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="enableFlag">
              <el-switch
                v-model="form.enableFlag"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="销售型号" prop="salesModel">
              <el-input
                v-model="form.salesModel"
                placeholder="请输入销售型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售别名" prop="salesAlias">
              <el-input
                v-model="form.salesAlias"
                placeholder="请输入销售别名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加工信息" prop="processInfo">
              <el-input
                v-model="form.processInfo"
                placeholder="请输入加工信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否支持渲染" prop="isSupportRendering">
              <el-switch
                v-model="form.isSupportRendering"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用系列" prop="isEnabledSeries">
              <el-switch
                v-model="form.isEnabledSeries"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最小起算" prop="minimum">
              <el-input-number
                style="width: 100%"
                v-model="form.minimum"
                placeholder="请输入最小起算"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单重" prop="pieceWeight">
              <el-input-number
                style="width: 100%"
                v-model="form.pieceWeight"
                placeholder="请输入单重"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模型" prop="complexMachiningModelId">
              <el-select
                v-model="form.complexMachiningModelId"
                placeholder="请选择模型"
                style="width: 100%"
                filterable
                clearable
              >
                <template v-if="['0', '1'].includes(form.type)">
                  <el-option
                    v-for="item in modelList"
                    :key="item.mdComplexMachiningModelId"
                    :label="item.name"
                    :value="item.mdComplexMachiningModelId"
                  />
                </template>
                <template v-else>
                  <el-option
                    v-for="item in newVmList"
                    :key="item.mdWindowCurtainModelId"
                    :label="item.modelName"
                    :value="item.mdWindowCurtainModelId"
                  />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="16">
            <el-form-item label="模型id" prop="complexMachiningModelId">
              <el-input
                style="width: 80%"
                v-model="form.complexMachiningModelId"
                placeholder="请输入窗帘复杂加工模型id"
              >
              </el-input>
              <el-button
                type="primary"
                style="width: calc(20% - 10px)"
                class="ml10"
                >点击选择</el-button
              >
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="sku 图" prop="skuPicture">
              <image-upload v-model="form.skuPicture" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">价格相关数据</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="价格模型" prop="priceModel">
              <el-select
                v-model="form.priceModel"
                placeholder="请选择价格模型"
                style="width: 100%"
              >
                <el-option label="默认" value="0" />
                <el-option label="布按米" value="1" />
                <el-option label="布按套" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-descriptions
              class="open-right"
              direction="vertical"
              :column="2"
              border
            >
              <el-descriptions-item label="价格">单价</el-descriptions-item>
              <el-descriptions-item label="出厂价">
                <el-form-item label-width="0" prop="factoryPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.factoryPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="16">
            <el-descriptions
              class="ml20 open-right"
              direction="vertical"
              :column="3"
              border
            >
              <el-descriptions-item label="价格"
                >单价<span style="color: red"
                  >(默认价格)</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="经销价">
                <el-form-item label-width="0" prop="wholesalePrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.wholesalePrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                <el-form-item label-width="0" prop="retailPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.retailPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">复杂加工列表</span>
          <el-button
            type="primary"
            plain
            size="mini"
            class="ml10"
            @click="machine.show = true"
            >选择复杂加工</el-button
          >
        </div>
        <el-table :data="machineList">
          <el-table-column
            label="是否标配"
            align="center"
            prop="isStandardConfig"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.isStandardConfig"
                true-label="Y"
                false-label="N"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="能否取消"
            align="center"
            prop="isRequired"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.isRequired"
                :disabled="row.isStandardConfig !== 'Y'"
                true-label="Y"
                false-label="N"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="复杂加工"
            align="center"
            prop="complexMachiningName"
          />
          <el-table-column
            label="详情"
            align="center"
            prop="isDescribe"
            show-overflow-tooltip
          />
          <el-table-column
            label="是否启用"
            align="center"
            prop="enableFlag"
            width="100"
          >
            <template slot-scope="{ row }">
              {{ row.enableFlag === "Y" ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column
            label="排序"
            align="center"
            prop="sort"
            class-name="small-padding fixed-width"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-top"
                :disabled="scope.$index === 0"
                @click="handleMove(scope.$index, 'top')"
                >上移</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                :disabled="scope.$index + 1 === machineList.length"
                @click="handleMove(scope.$index, 'bottom')"
                >下移</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
    <!-- 选择复杂加工 -->
    <machine-part-view
      v-if="machine.show"
      :show.sync="machine.show"
      @on-change="handleMachineChange"
    ></machine-part-view>
  </el-dialog>
</template>

<script>
import {
  getCustomization,
  addCustomization,
  updateCustomization,
} from "@/api/goods/gd";
import { listModel } from "@/api/process/model";
import MachinePartView from "@/views/process/machine/mods/part.vue";
import { listModel as vmModel } from "@/api/process/vm";
import { TYPES } from "@/views/process/vm/configure.js";

export default {
  components: {
    MachinePartView,
  },
  dicts: ["md_high_end_customization_type"],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      machine: {
        show: false,
      },
      machineList: [], // 复杂加工列表
      modelList: [], // 复杂加工模型
      vmList: [], // 商品模型
      newVmList: [], // 区分类型商品模型
      // 表单参数
      form: {
        highEndCustomizationId: null,
        name: null,
        type: null,
        enableFlag: "N",
        salesModel: null,
        salesAlias: null,
        processInfo: null,
        isSupportRendering: "N",
        isEnabledSeries: "N",
        minimum: null,
        pieceWeight: null,
        skuPicture: null,
        complexMachiningModelId: null,
        priceModel: "0",
        factoryPrice: null,
        wholesalePrice: null,
        retailPrice: null,
        complexMachining: null,
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "品名不能为空", trigger: "change" }],
        pieceWeight: [
          { required: true, message: "单重不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加高端定制",
        edit: "修改高端定制",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    await this.getModelList();
    await this.getVmModel();
    if (this.type === "edit") {
      this.handleUpdate();
    }
  },
  methods: {
    async getModelList() {
      const { rows } = await listModel({
        pageNum: 1,
        pageSize: 500,
      });
      this.modelList = rows;
    },
    /** 获取详情 */
    handleUpdate() {
      const highEndCustomizationId = this.data.highEndCustomizationId;
      getCustomization(highEndCustomizationId).then((response) => {
        this.form = response.data;
        this.machineList = response.data?.complexMachinings || [];
        this.handleGDChange(this.form.type, "init");
      });
    },

    /** 获取商品模型 */
    async getVmModel() {
      const { rows } = await vmModel({
        pageNum: 1,
        pageSize: 1000,
      });
      this.vmList = rows;
    },

    /** 选择类型 */
    handleGDChange(val, status = "") {
      console.log(val, "val");
      if (!["0", "1"].includes(val)) {
        const item = this.dict.type.md_high_end_customization_type?.find(
          (e) => e.value === val
        );
        const type = TYPES?.find((e) => e.label === item?.label)?.value;
        this.newVmList = this.vmList?.filter((e) => e.type === type);
      }
      if (status !== "init") {
        this.form.complexMachiningModelId = null;
      }
    },

    /** 选择复杂加工 */
    handleMachineChange(data) {
      const list = data.filter(
        (e) =>
          !this.machineList?.find(
            (v) => v.complexMachiningId === e.mdComplexMachiningId
          )
      );
      this.machineList = [
        ...this.machineList,
        ...list?.map((e) => ({
          complexMachiningId: e.mdComplexMachiningId,
          complexMachiningName: e.complexMachiningName,
          enableFlag: e.enableFlag,
          isDescribe: e.isDescribe,
          highEndCustomizationId: "",
          serialNumber: "",
          isStandardConfig: "N",
          isRequired: "N",
        })),
      ];
    },
    // 移动
    handleMove(index, type) {
      switch (type) {
        case "top": {
          const temp = { ...this.machineList[index] };
          const temp1 = { ...this.machineList[index - 1] };
          this.$set(this.machineList, index - 1, temp);
          this.$set(this.machineList, index, temp1);
          break;
        }
        case "bottom": {
          const temp = { ...this.machineList[index] };
          const temp1 = { ...this.machineList[index + 1] };
          this.$set(this.machineList, index + 1, temp);
          this.$set(this.machineList, index, temp1);
          break;
        }
        default:
          break;
      }
    },
    /** 移除 */
    handleDelete(index) {
      this.machineList.splice(index, 1);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.complexMachinings = this.machineList?.map((e, index) => {
            return {
              ...e,
              highEndCustomizationId: this.form.highEndCustomizationId,
              serialNumber: index + 1,
            };
          });
          if (this.form.highEndCustomizationId != null) {
            updateCustomization(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addCustomization(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
